<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<link rel="stylesheet" href="../css/mui.min.css">
		<script type="text/javascript" src="../js/iconfont.js"></script>
		<style>
			.iconzs {
				width: 1em;
				height: 1em;
				vertical-align: -0.15em;
				fill: currentColor;
				overflow: hidden;
			}
			
			html,
			body {
				background-color: #eeeeee;
			}
			
			.mui-views,
			.mui-view,
			.mui-pages,
			.mui-page,
			.mui-page-content {
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				width: 100%;
				height: 100%;
				background-color: #efeff4;
			}
			
			.mui-pages {
				top: 46px;
				height: auto;
			}
			
			.mui-scroll-wrapper,
			.mui-scroll {
				background-color: #efeff4;
			}
			
			.mui-page.mui-transitioning {
				-webkit-transition: -webkit-transform 300ms ease;
				transition: transform 300ms ease;
			}
			
			.mui-page-left {
				-webkit-transform: translate3d(0, 0, 0);
				transform: translate3d(0, 0, 0);
			}
			
			.mui-ios .mui-page-left {
				-webkit-transform: translate3d(-20%, 0, 0);
				transform: translate3d(-20%, 0, 0);
			}
			
			.mui-navbar {
				position: fixed;
				right: 0;
				left: 0;
				z-index: 10;
				height: 44px;
				background-color: #f7f7f8;
			}
			
			.mui-navbar .mui-bar {
				position: absolute;
				background: transparent;
				text-align: center;
			}
			
			.mui-android .mui-navbar-inner.mui-navbar-left {
				opacity: 0;
			}
			
			.mui-ios .mui-navbar-left .mui-left,
			.mui-ios .mui-navbar-left .mui-center,
			.mui-ios .mui-navbar-left .mui-right {
				opacity: 0;
			}
			
			.mui-navbar .mui-btn-nav {
				-webkit-transition: none;
				transition: none;
				-webkit-transition-duration: .0s;
				transition-duration: .0s;
			}
			
			.mui-navbar .mui-bar .mui-title {
				display: inline-block;
				width: auto;
			}
			
			.mui-page-shadow {
				position: absolute;
				right: 100%;
				top: 0;
				width: 16px;
				height: 100%;
				z-index: -1;
				content: '';
			}
			
			.mui-page-shadow {
				background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, .01) 50%, rgba(0, 0, 0, .2) 100%);
				background: linear-gradient(to right, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, .01) 50%, rgba(0, 0, 0, .2) 100%);
			}
			
			.mui-navbar-inner.mui-transitioning,
			.mui-navbar-inner .mui-transitioning {
				-webkit-transition: opacity 300ms ease, -webkit-transform 300ms ease;
				transition: opacity 300ms ease, transform 300ms ease;
			}
			
			.mui-page {
				display: none;
			}
			
			.mui-pages .mui-page {
				display: block;
			}
			
			.mui-page .mui-table-view:first-child {
				margin-top: 15px;
			}
			
			.mui-page .mui-table-view:last-child {
				margin-bottom: 30px;
			}
			
			.mui-table-view {
				margin-top: 20px;
			}
			
			.mui-table-view span.mui-pull-right {
				color: #999;
			}
			
			.mui-table-view-divider {
				background-color: #efeff4;
				font-size: 14px;
			}
			
			.mui-table-view-divider:before,
			.mui-table-view-divider:after {
				height: 0;
			}
			
			.head {
				height: 40px;
			}
			
			#head {
				line-height: 40px;
			}
			
			.head-img {
				width: 40px;
				height: 40px;
			}
			
			#head-img1 {
				position: absolute;
				bottom: 10px;
				right: 40px;
				width: 40px;
				height: 40px;
			}
			
			.update {
				font-style: normal;
				color: #999999;
				margin-right: -25px;
				font-size: 15px
			}
			
			.mui-fullscreen {
				position: fixed;
				z-index: 20;
				background-color: #000;
			}
			
			.mui-ios .mui-navbar .mui-bar .mui-title {
				position: static;
			}
			/*问题反馈在setting页面单独的css*/
			
			#feedback .mui-popover {
				position: fixed;
			}
			
			#feedback .mui-table-view:last-child {
				margin-bottom: 0px;
			}
			
			#feedback .mui-table-view:first-child {
				margin-top: 0px;
			}
			/*问题反馈在setting页面单独的css==end*/
			
			.mui-page .mui-table-view:first-child {
				margin-top: 0px;
			}
			
			.mui-table-view {
				margin-top: 10px;
			}
			
			.mui-table-view .mui-media-object {
				line-height: 75px;
				max-width: 75px;
				height: 75px;
			}
			
			.mui-table-view .mui-media-body {
				line-height: 75px;
				color: #313131 !important;
				font-weight: bold;
			}
			
			.kjannbg {
				border-radius: 50%;
				width: 1.2em;
				height: 1.2em;
			}
			
			.kjannbg .iconzs {
				width: 0.7em;
				height: 0.7em;
			}
			
			.kjannbg#an1 {
				background: #ecb714;
				box-shadow: 0px 3px #fcf4da;
				-webkit-box-shadow: 0px 3px #fcf4da;
			}
			
			.kjannbg#an2 {
				background: #00a0e9;
				box-shadow: 0px 3px #c6eafa;
				-webkit-box-shadow: 0px 3px #c6eafa;
			}
			
			.kjannbg#an3 {
				background: #eb6877;
				box-shadow: 0px 3px #fadce0;
				-webkit-box-shadow: 0px 3px #fadce0;
			}
			
			.mui-grid-view.mui-grid-9 .mui-table-view-cell {
				margin: 0;
				padding: 0px 15px;
				vertical-align: top;
				border-right: 0px;
				border-bottom: 0px;
			}
			
			.head-img {
				border-radius: 50%;
				height: 75px;
				width: 75px;
			}
			
			.mui-table-view.mui-grid-view .mui-table-view-cell .mui-media-body {
				font-size: 15px;
				line-height: 19px;
				display: block;
				width: 100%;
				height: 19px;
				margin-top: 8px;
				text-overflow: ellipsis;
				color: #333;
				font-weight: 100;
			}
			
			.mui-switch.mui-active {
				border-color: #ecb714;
				background-color: #ecb714;
			}
			/*个人信息*/
			
			#tuchulogin {
				border-radius: 10px;
				font-size: 18px;
				display: block;
				width: 100%;
				margin: 10px 0;
				padding: 10px 0;
				background: #ecb714;
				border: 0px;
			}
			/*我的收藏*/
			
			#shouc .mui-card-link .mui-icon {
				font-size: 18px;
				color: #8a8a8a;
			}
			
			#shouc .mui-card-header.mui-card-media .mui-media-body {
				font-size: 15px;
				font-weight: 500;
				line-height: 24px;
				margin-bottom: 0;
				margin-left: 0px;
				color: #333;
			}
			
			#shouc .mui-card-header.mui-card-media .mui-media-body h4 {
				font-size: 16px;
				line-height: 24px;
				width: 100%;
				color: #313131;
				position: relative;
			}
			
			#shouc .mui-card-header.mui-card-media .mui-media-body p {
				font-size: 13px;
				margin-bottom: 0;
				line-height: 20px;
				padding-top: 10px;
			}
			
			#shouc .xianqing {
				width: 0.5em;
				height: 0.5em;
				display: block;
			}
			
			#shouc .rightqj {
				display: inline-block;
			}
			
			#shouc .mui-card-footer:before,
			.mui-card-header:after {
				position: absolute;
				top: 0;
				right: 0;
				left: 0;
				height: 0px;
				content: '';
				-webkit-transform: scaleY(.5);
				transform: scaleY(.5);
				background-color: #c8c7cc;
			}
			
			#shouc .mui-card-header:after {
				top: auto;
				height: 1px;
				bottom: 0;
				width: 90%;
				margin: 0 auto;
				text-align: center;
			}
			
			#shouc .mui-card {
				margin: 10px 10px !important;
				border-radius: 5px;
			}
			
			#shouc .mui-table-view {
				position: relative;
				margin-top: 0;
				margin-bottom: 0;
				padding-left: 0;
				list-style: none;
				background-color: rgba(0, 0, 0, 0);
			}
			
			#shouc .mui-table-view.mui-grid-view .mui-table-view-cell {
				font-size: 17px;
				display: inline-block;
				margin-right: -4px;
				padding: 10px 0 0 10px;
				text-align: center;
				vertical-align: middle;
				background: 0 0;
			}
			
			#shouc .mui-table-view.mui-grid-view {
				font-size: 0;
				display: block;
				width: 100%;
				padding: 0 0px 10px 0;
				white-space: normal;
			}
			
			#shouc .zixuntit {
				background: #5092e4;
				height: 7em;
				width: 100%;
				border-radius: 8px;
			}
			
			#shouc .zixuntit .iconzs {
				font-size: 50px;
				margin-top: 20px;
			}
			
			#shouc .zixuntit .ltit {
				line-height: 40px;
				color: #FFFFFF;
			}
		</style>

	</head>

	<body>

		<div id="account" class="mui-content" style="top:44px;">

			<div class="mui-page-content1" style="top:44px;">
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<ul class="mui-table-view">
							<li class="mui-table-view-cell">
								<a id="head" class="mui-navigate-right">头像
									<span class="mui-pull-right head">
									<img  class="head-img mui-action-preview" id="head-img1" src="../images/001.jpg"/>
								</span>
								</a>
							</li>
							<li class="mui-table-view-cell">
								<a>账户<span class="mui-pull-right" id="myName"></span></a>
							</li>
							<!--<li class="mui-table-view-cell">
								<a>修改密码<span class="mui-pull-right"></span></a>
							</li>-->
						</ul>
						<!--<ul class="mui-table-view">

							<li class="mui-table-view-cell">
								<a>更改手机号码<span class="mui-pull-right">18601234567</span></a>
							</li>

						</ul>-->

						<div class="mui-content-padded">
							<button id='tuchulogin' class="mui-btn mui-btn-block mui-btn-primary" onclick="logout();">退出登陆</button>
						</div>
					</div>

				</div>
			</div>
		</div>

		<script type="text/javascript" src="../js/Common.js"></script>
		<script type="text/javascript" src="../js/mui.min.js"></script>
		<script>console.log(1);
			mui.init();

			var state;
			try {
				state = JSON.parse(localStorage.getItem("loginState"));
				 
				if(state.type == 'wx') {
				 
					document.getElementById("head-img1").src = state.userInfo.headimgurl;
					document.getElementById("myName").innerText = state.userInfo.nickname;
				} else {
					document.getElementById('myName').innerText = state.LoginId;
				}
			} catch(e) {
				console.log(e); 
				//location.href = 'flogin.html';
				//TODO handle the exception
			}
			/*document.getElementById('tuchulogin').addEventListener('tap',function(){
				localStorage.setItem('loginState', "undefined");

				plus.nativeUI.toast('退出成功'); 
				parent.evalJS('subBack()');
			});*/
			//退出登陆
			function logout() {
				localStorage.setItem('loginState', "undefined");
				
				 var settingPage = plus.webview.getWebviewById('examples/setting.html');

                                settingPage.evalJS('defaultImg()');

				plus.nativeUI.toast('退出成功');
				mui.plusReady(function(){
					 plus.oauth.getServices(function (services) {
                    auths = services;
                    //判断是否登陆了
                    var s = auths[0];
                    if(s.authResult)
                    {
                    	s.logout();
                    }

                }, function (e) {
                    alert("获取分享服务列表失败：" + e.message + " - " + e.code);
                });
				});
				mui.back();
				//location.href = 'flogin.html';
			}
			//处理点击事件，需要打开原生浏览器
			/*mui('body').on('tap', 'a', function(e) {
				var href = this.getAttribute('href');
				if(href) {
					if(window.plus) {
						plus.runtime.openURL(href);
					} else {
						location.href = href;
					}
				}
			});*/
		</script>
	</body>

</html>